<template>
  <div class="study-record">
    <!-- 顶部蓝色渐变大卡片标题栏 -->
    <div class="main-header">
      <div class="main-title">学习记录</div>
      <el-button type="primary" class="main-header-btn">导出记录</el-button>
    </div>
    <!-- 美化后的统计卡片 -->
    <div class="stat-row">
      <div class="stat-card stat-today">
        <div class="stat-icon"><el-icon><Clock /></el-icon></div>
        <div class="stat-info">
          <div class="stat-value">{{ formatHourMinute(statTime.today) }}</div>
          <div class="stat-label">今日学习时长</div>
        </div>
      </div>
      <div class="stat-card stat-week">
        <div class="stat-icon"><el-icon><Calendar /></el-icon></div>
        <div class="stat-info">
          <div class="stat-value">{{ formatHourMinute(statTime.week) }}</div>
          <div class="stat-label">本周学习时长</div>
        </div>
      </div>
      <div class="stat-card stat-month">
        <div class="stat-icon"><el-icon><Timer /></el-icon></div>
        <div class="stat-info">
          <div class="stat-value">{{ formatHourMinute(statTime.month) }}</div>
          <div class="stat-label">本月学习时长</div>
        </div>
      </div>
    </div>
    <!-- 简洁表格 -->
    <div class="simple-table-container">
      <el-table 
        :data="recordList" 
        style="width: 100%" 
        v-loading="loading"
        element-loading-text="加载中..."
        :empty-text="error ? error : '暂无数据'"
      >
        <el-table-column prop="createTime" label="开始时间" min-width="180">
          <template #default="scope">
            {{ formatDateOnly(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" min-width="180">
          <template #default="scope">
            {{ formatDateOnly(scope.row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column label="学习时长" min-width="120">
          <template #default="scope">
            {{ formatDuration(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column prop="mission" label="学习内容" min-width="200">
          <template #default="scope">
            {{ scope.row.mission }}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { Clock, Calendar, Timer } from '@element-plus/icons-vue'

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const recordList = ref([])

// 新增：统计时长数据
const statTime = ref({
  today: 0,
  week: 0,
  month: 0
})

// 新增：格式化秒为"X小时Y分Z秒"
const formatHourMinute = (seconds) => {
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  const s = seconds % 60
  const parts = []
  if (h > 0) parts.push(`${h}小时`)
  if (m > 0) parts.push(`${m}分`)
  if (s > 0 || (h === 0 && m === 0)) parts.push(`${s}秒`)
  return parts.join('')
}

// 新增：获取统计数据
const fetchStatTime = async () => {
  try {
    const res = await axios.get('/api/study/time')
    if (res.data.code === '200') {
      statTime.value = res.data.data || { today: 0, week: 0, month: 0 }
    }
  } catch (e) {
    console.error('获取统计时长失败', e)
  }
}

// 加载状态
const loading = ref(false)
// 错误状态
const error = ref(null)

// 获取记录列表
const fetchRecordList = async () => {
  loading.value = true
  error.value = null
  
  try {
    const response = await axios.get('/api/study/list', {
      params: {
        current: currentPage.value,
        size: pageSize.value
      }
    })
    if (response.data.code === '200') {
      recordList.value = response.data.data.data || []
      total.value = response.data.data.total || 0
    } else {
      error.value = response.data.message || '获取学习记录失败'
      ElMessage.error(error.value)
    }
  } catch (error) {
    console.error('获取学习记录失败:', error)
    error.value = '网络错误，请稍后重试'
    ElMessage.error('获取学习记录失败')
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDateOnly = (date) => {
  if (!date) return ''
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hours = String(d.getHours()).padStart(2, '0')
  const minutes = String(d.getMinutes()).padStart(2, '0')
  const seconds = String(d.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 格式化时长
const formatDuration = (record) => {
  const hours = record.hour || 0
  const minutes = record.minute || 0
  const seconds = record.second || 0
  const parts = []
  if (hours > 0) parts.push(`${hours}小时`)
  if (minutes > 0) parts.push(`${minutes}分钟`)
  if (seconds > 0) parts.push(`${seconds}秒`)
  return parts.join('') || '0秒'
}

const handleSizeChange = (val) => {
  pageSize.value = val
  fetchRecordList()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchRecordList()
}
onMounted(() => {
  fetchStatTime()
  fetchRecordList()
})
</script>

<style scoped>
.study-record {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);
}
.main-header {
  width: 100%;
  background: linear-gradient(135deg, #409EFF 0%, #85c5ff 100%);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(64, 158, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 40px 32px 40px;
  margin-bottom: 32px;
}
.main-title {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
}
.main-header-btn {
  background: #fff;
  color: #409EFF;
  border: none;
  font-weight: 500;
  font-size: 16px;
  border-radius: 8px;
  padding: 12px 32px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
  transition: all 0.2s;
}
.main-header-btn:hover {
  background: #e6f2ff;
  color: #1769aa;
  transform: translateY(-2px);
}
.stat-row {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}
.stat-card {
  flex: 1;
  background: linear-gradient(135deg, #e0e7ff 0%, #f0f9ff 100%);
  border-radius: 14px;
  box-shadow: 0 4px 16px 0 rgba(64,158,255,0.08);
  padding: 24px 0 20px 0;
  display: flex;
  align-items: center;
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}
.stat-card:hover {
  box-shadow: 0 8px 32px 0 rgba(64,158,255,0.18);
  transform: translateY(-4px) scale(1.03);
}
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 24px;
  margin-right: 18px;
  font-size: 26px;
  background: linear-gradient(135deg, #409EFF 0%, #85c5ff 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(64,158,255,0.10);
}
.stat-today {
  background: linear-gradient(135deg, #f0f9ff 0%, #a7e0ff 100%);
}
.stat-week {
  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
}
.stat-month {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}
.stat-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.stat-label {
  color: #888;
  font-size: 15px;
  margin-top: 6px;
}
.stat-value {
  color: #222;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 2px;
}
.simple-table-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  padding: 24px;
}
.pagination-container {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}
</style>
